<template>
  <section class="login-container" :class="flexible">
    <div class="form-container">
      <div class="form-wrapper">
        <logo background="none" color="#5c5c5c"/>
        <div class="form-main">
          <el-form :model="loginForm">
            <el-form-item label="账号">
              <el-input />
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" />
            </el-form-item>
            <el-form-item class="btn">
              <el-button type="primary" style="width: 100%;">登 录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="form-tip">
          <el-divider>
            <el-button type="text" icon="el-icon-info">温馨提示</el-button>
          </el-divider>
          <div class="tip-wrapper ">
            <p>1、账号：学生使用学号，教师使用工号</p>
            <p>2、推荐浏览器: 谷歌、360安全浏览器极速模式</p>
            <p>3、联系管理员：5a3w4d5dwa</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import FlexibleMixIn from '@/layout/mixin/Flexible'
import { mapGetters } from 'vuex'
import background from '@/assets/bg.png'
import logo from '@/layout/components/TopBar/logo.vue'

export default {
  name: 'Login',
  mixins: [FlexibleMixIn],
  components: { logo },
  computed: {
    ...mapGetters(['device', 'login']),
    flexible() {
      return {
        mobile: this.device === 'mobile',
        withoutAnimation: this.login.withoutAnimation
      }
    }
  },
  data() {
    return {
      img: background,
      loginForm: null
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background: url('~@/assets/bg.png') no-repeat fixed center / cover;

  .form-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
    height: 100%;
    min-height: 600px;
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(1.2px);
    transition: all .5s;
  }

  .form-wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    width: 360px;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    background-color: #fff;
  }

  .form-main {
    width: 100%;

    .el-form-item {
      margin-bottom: 10px;

      &.btn {
        margin: 30px 0 20px;
      }
    }
  }

  .form-tip {
    width: 100%;

    .tip-wrapper {
      height: 130px;

      p {
        font-size: 14px;
        color: #999;
      }

      p + p {
        margin-top: 5px;
      }
    }
  }

  &.mobile {
    .form-container {
      width: 100%;
      backdrop-filter: blur(3px);
      background-color: rgba(0, 0, 0, .3);
    }

    .form-wrapper {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
    }
  }
}

.withoutAnimation {
  .form-container {
    transition: none !important;
  }
}
</style>